<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;/*overflow: auto;*/}
#div4 { position: absolute; left: 0; top: 0;}
</style>

<!-- JS代碼 -->
<script>
    window.onload=function(){
       var div1=document.getElementById("div1");
       var div2=document.getElementById("div2");
       var div3=document.getElementById("div3");
       var div4=document.getElementById("div4");
       // var div1=document.getElementById("div1");
       div2.onmousedown=function(event){
            
            // var t0=;
            // console.log(this.offsetTop)
            //  // this.offsetTop表示当前滑块到div1的垂直距离，比如滑块在中间位置开始往下滑动时，就要减去这段距离
            // 计算鼠标点击时离垂直距离，即top方向
            var disY=event.clientY-this.offsetTop;
            console.log("鼠标离滑块的顶部侧距离为："+disY);
            var that=this;
            document.onmousemove=function(event){
                // 滑块最远的距离
                var L=div1.clientHeight-that.offsetWidth;
                // 当前滑动的距离为：
                var l=event.clientY-disY;
                console.log("最远能滑到："+L)
                // 顶边界判断
                if(l<0){
                    l=0;
                }
                // 底部边界判断
                if(l>L){
                    l=L;
                }
                // 将当前滑动的距离赋值给滑块的样式
                that.style.top=l+"px";
                // 找比例，看看滚动时，内容要移动多少下拉
                // 比例可以是当前滚动的距离除以滚动条的可移动距离
                var bl=l/L;
                // 这个比例与右侧内容区域的比例是一致的，右侧内容区，最高能到达的位置是353，即
                // 
                var T=div4.scrollHeight-div3.offsetHeight;
                // console.log("T"+T)
                // console.log(bl)
                // 带着div4往回滚动
                div4.style.top=-(T*bl)+"px";

            }

            document.onmouseup=function(){
                document.onmousemove=null;
            }

       }
    }
</script>
</head>

<body>
    <!-- 进度条 -->
	<div id="div1">
        <!-- 进度条滑块 -->
    	<div id="div2"></div>
    </div>
    <!-- 内容 -->
    <div id="div3">
        <div id="div4">
            <p>女孩每天下班都要经过一个长长的隧道，然后在站台等待520路公交车回家。最近这块地方发生了可怕的袭击案，所以女孩和同公司的另一个女孩相约每天一起乘车回家。</p>

            　　<p>今天下班前，她接到那个同行女生的电话，说可能会晚点下班，让她在隧道口等她一小会儿。冬天的时候，天总是黑得很快。女孩发现今天的隧道里一片昏暗，因为施工改建杂乱不堪，两三个零星的路灯点在那里，依稀有几个路人摸索着走进了隧道，就像进入了一个可怕的迷宫一样。</p>

            　　<p>左等右等，那个同行的女孩还是不来。突然旁边大声的说话声引起了她的注意。她顺着声音望去，原来是一个男孩在隧道口附近一边来回踱步，一边打电话，口气很着急的样子。</p>

            　　<p>“喂，是我错了好不好，下次不会这样了。我在老地方等你，特意给你带来了礼物。什么？别说分手行不？今天下雨，要谈，改天天气好的时候再谈？”</p>

            　　<p>天色越来越晚，女孩还在等人，男孩还在打电话，隧道口只有他们两个人在徘徊，各怀心事。女孩不停地给那个同行的女孩打电话，但打了很多电话都没人接听。男孩电话倒是一直没断，一直在说不要分手之类的挽回的话。</p>

            　　<p>过了半个小时，女孩用尽手机的最后一点电量给同行的女孩发消息说，太晚了，自己打车先走了，希望收到消息后能马上回复她。然而很久都没有一辆空车驶过，女孩不知道该怎么办，急得都快哭了。</p>

            　　<p>就在这时，一边还在不停地打电话的男孩发觉女孩的矛盾不安，他一边打电话，一边慢慢进入了隧道。隧道里男孩手机的亮光显得格外的明亮，男孩走得很慢，像是特意等着女孩能在后面跟着走的样子。</p>

            　　<p>女孩看出了男孩的好心，慢慢跟着他走进了长长的隧道，虽然心里还是不自觉地害怕，可是男孩手机蓝色的亮光和大声的说话声让她觉得不可思议的安心，那粗鲁的说话声也变得爽朗可爱起来。</p>

            　　<p>走到隧道中间的时候，车行道因为挖地，坑坑洼洼的，连带旁边的人行道也鼓起一块，很容易被绊倒。男孩放下电话，没有回头，轻轻地说了声“小心”，然后又继续向前边走边打电话。</p>

            　　<p>女孩听到那句“小心”后愣了下，她避开那个容易摔倒的地方，然后轻轻地回了声“谢谢”。男孩响亮的皮鞋声和女孩脆弱的高跟鞋声在隧道里有节奏而默契地响着，像是温柔的鼓点在隧道里打开。</p>

            　　<p>女孩一边行走，心一点一点在变暖。男孩一直在前面打电话，没有回头，也没有和女孩说一句话，快要到出口时，慢慢地对着电话说：“真的没有余地了吗？我们就这样结束了吗？”男孩的心似乎在一点点变冷。</p>

            　　<p>男孩先走出了隧道，转过身，眼睛朝隧道里望去。女孩跟在他后面接着出了隧道，这一刻他们的眼神才第一次碰撞在一起。女孩看着男孩，露出了淡淡的微笑表示谢意，男孩点了下头也抿嘴笑了笑，露出两个小酒窝。</p>

            　　<p>男孩放下了电话，转身一个人落寞地朝隧道往回走，就这样一点一点消失了。隧道并不是他必经的路，他是为了那个女孩特意走过来的。</p>

            　　公交车站近在咫尺，傍晚的空气很温暖，但她的心却“扑通扑通”直跳。520路公交车摇摇晃晃地驶了过来……
        </div>
    </div>
</body>
</html>
